<template>
	<view style="position: relative;background-color: #F6F7FB;height: 100vh;">
		<view class="w-full" style="z-index: 0;position:absolute;">
			<image class="w-full" style="height: 60vh;" mode="scaleToFill" src="/static/img/driver_bg.png"></image>
		</view>
		<view class="flex-col w-full  flex-shirnk-0" style="z-index: 1;" :style="{ 'padding-top': navBarHeight + 'px' }">
			<view class="flex flex-row ml-24 mr-24">
				<view class="w-140 h-140 overflow-hidden flex-shirnk-0 mr-8">
					<image class="w-full h-full" mode="scaleToFill" v-if="driver_myinfor.avatar"
						:src="getImageUrl(driver_myinfor.avatar)"></image>
					<image class="w-full h-full" mode="scaleToFill" v-if="!driver_myinfor.avatar" src="/static/img/touxiang.png">
					</image>
				</view>
				<view class="flex-1" style="z-index: 1;">
					<view class="flex flex-row">
						<!-- <view>{{driver_myinfor.username}}</view> -->
						<view class="text-111 fz32 mr-12 flex-1" style="font-weight: 600;max-width: fit-content;">
							{{ driver_myinfor.username || $t('暂无')}}</view>
						<!-- <view class="tag_yellow" v-if="driver_inforCar.length>0">
							<view class="tag_bor fz22" style="font-weight: 500;">{{driver_inforCar[0].car_number}}</view> 
						</view> -->
						<!-- <view class="tag_yellow" v-if="driver_inforCar.length==0">
							<view class="tag_bor fz22" style="font-weight: 500;">{{$t('暂无信息')}}</view> 
						</view> -->
						<view class="flex flex-row driver_tags rounded-45 p-4" style="width: 140rpx;">
							<view class="w-45 h-45 overflow-hidden flex-shirnk-0 mr-8 " style="border-radius: 50%;">
								<image class="w-full h-full" mode="scaleToFill" src="/static/img/driver_ren.png"></image>
							</view>
							<view class="fz24" style="color: #5D3800;font-weight: 500;">{{$t('运输')}}</view>
						</view>
					</view>
					<view v-if="driver_infors.type == 32" class="bottom-w flex flex-row mt-26">
						<view class="flex flex-row driver_tags rounded-45 mr-16 h-50 pr-28 pl-28" @click="unbindingChange(driver_infor)" v-if="bind_user_id&&false">
							<image class="w-22 h-22 mr-12" mode="scaleToFill" src="/static/img/link.png"></image>
							<view class="fz24" style="color: #5D3800;font-weight: 500;">{{$t('解绑')}}</view>
						</view>

						<view class="flex flex-row driver_tags rounded-45 mr-16 h-50 pr-28 pl-28" @click="bindingChange" v-if="false">
							<!-- <image class="w-22 h-22 mr-12" mode="scaleToFill" src="/static/img/link.png"></image> -->
							<view class="fz24" style="color: #5D3800;font-weight: 500;">{{ $t('绑定') }}</view>
							<u-badge  :value="applyDot" :absolute="true" :offset="[-10,0]"></u-badge>
						</view>


						<view class="flex flex-row driver_tags rounded-45 mr-16 h-50 pr-28 pl-28" v-if="bind_user_id"
							@click="onChangeIdefidy">
							<image class="w-24 h-18 mr-12" mode="scaleToFill" src="/static/img/change.png"></image>
							<view class="fz24" style="color: #5D3800;font-weight: 500;">{{$t('身份变更')}}</view>
						</view>

					</view>

				</view>
			</view>
			<view class="driver_task mt-20" style="z-index: 1">
				<view class="flex driver_box" @click="onMyPerson">
					<view class="driver_item mr-20">
						<image class="w-full g-full" mode="scaleToFill" src="/static/img/tongshi.png"></image>
					</view>
					<view class="fz32" style="color: #1D1D1D;font-weight: 600;">{{$t('我的同事')}}</view>
				</view>
				<button :disabled="driver_infors.type != 32" class="flex driver_box" @click="driverChange">
					<view class="driver_item mr-20">
						<image class="w-full g-full" mode="scaleToFill" src="/static/img/driver-car.png"></image>
					</view>
					<view class="fz32" style="color: #1D1D1D;font-weight: 600;">{{$t('车辆管理')}}</view>
				</button>
			</view>
		</view>
		<!-- 我的任务 -->
		<view class="task-my">{{$t('我的任务')}}</view>
		<view class="flex-col w-full mt-20 xxxxx" :style="{ height: getHeight() }">
			<scroll-view scroll-y  @scrolltolower="lower">
				<view class="scrolls">
					<view class="wlxx" v-for="(allInfo, index) in infoList" :key="index" @click="onGoDetail(allInfo)">
						<view class="order_info">
							<view class="info_tit">
								<view class="time">
									{{$t('接单时间')}}：{{ allInfo.create_at }}
								</view>
								<view class="type">
									{{allInfo.goods_type == 0 ? $t('大件') : $t('小件')}} - {{getDemand(allInfo.demand)}}
								</view>
							</view>
							<view class="info_city">
								<view class="city_item">
									<view class="text">
										{{get(allInfo, "departure.area_info.name") || ''}}
									</view>
								</view>
								<view class="line">
									<view class="name" v-if="allInfo.transfer_count !== 0">
										{{$t('途经')}} {{allInfo.transfer_count}}
									</view>
									<image class="ico" src="/static/img/ico_line2.png" mode="widthFix"></image>
								</view>
								<view class="city_item">
									<view class="text">
										{{get(allInfo, "reach.area_info.name") || ''}}
									</view>
								</view>
							</view>
							<view class="info_city_text">
								<view class="text flex">
									<flag class="mr-6" :country="get(allInfo, 'departure.area_info.country')" />
									<view>{{get(allInfo, "departure.area_info.mergename") || ''}}</view>
								</view>
								<view class="text flex">
									<flag class="mr-6" :country="get(allInfo, 'reach.area_info.country')" />
									<view>{{get(allInfo, "reach.area_info.mergename") || ''}}</view>
								</view>
							</view>
						</view>
						<view class="item">
							<view class="name">
								{{$t('货物信息')}}
							</view>
							<view class="info">
								{{[get(allInfo, "goods_info.title"), get(allInfo, "goods_info.goods_weight")+"吨", get(allInfo, "goods_info.goods_volume")+'立方米', get(allInfo, "goods_info.package.title")].filter(item => item).join('/') || ''}}
							</view>
						</view>
						<view class="item">
							<view class="name">
								{{$t('业务需求')}}
							</view>
							<view class="info">
								<BusiRequire v-if="allInfo.goods_type == 0" :requireInfo = "allInfo.demand" />
								<BusiRequire v-else requireInfo = "1,2,3,4,5,6" />
							</view>
						</view>
						<view class="item">
							<view class="name">
								{{$t('运输方式')}}
							</view>
							<view class="info">
								{{transportList.filter(item => item.key == allInfo.transport_way)[0].value || ''}} - {{allInfo.transport_type == 1 ? $t('整车') : $t('散货')}} - {{get(allInfo, "vehicle_info.title")}}
							</view>
						</view>
						<!-- 上传工作情况 -->
						<view v-if="" class="upload-work" @click.stop="uploadWorkStatus(allInfo.id, allInfo.status)">
							{{$t('上报工作情况')}}
						</view>
					</view>

					<view v-if="infoList.length == 0">
						<u-empty
							:iconSize="100"
							:textSize="28"
							mode="order"
							:text="$t('暂无任务')"
						>
					</u-empty>

					</view>

				</view>
			</scroll-view>


		</view>

	</view>
</template>

<script>
	import BusiRequire from './busiRequire.vue'
import { driver_work,invite_bind } from '@/api/driver'
import { identity_change,my_task } from '@/api/basic.js'
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
	mixins: [MescrollMixin],
	components: {
		BusiRequire,
	},
	data() {
		return {
			applyDot: 0,
			navBarHeight: 0,
			driver_infor: {},
			driver_myinfor: {},
			driver_inforCar: [],
			driver_infors: {},
			bind_user_id: '',
			MAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com',
			infoList: [],
			demandList: {
				1:this.$t('运输'),
				2:this.$t('报关'),
				3:this.$t('转关'),
				4:this.$t('清关'),
			},
			transportList:[
					{
						key:'0',
						value:this.$t('不限')
					},
					{
						key:'1',
						value:'其他 '
					},
					{
						key:'2',
						value:this.$t('汽运')
					},
					{
						key:'3',
						value:this.$t('空运')
					},
					{
						key:'4',
						value:this.$t('海运')
					},
					{
						key:'5',
						value:this.$t('铁路')
					},
				],
		
			}
	},

	onLoad(options) {
		this.calculateHeight();
		this.driverWork()
		this.getData();
	},
	onShow() {
		console.log('收尾收尾')
	},
	methods: {
		// 上传工作情况
		uploadWorkStatus(id ,status) {
			if (status == 4) {
				uni.navigateTo({
					url:'/pages/orderDynamics/orderDynamics?completeFlag=true&id=' + id,
				})
			} else {
				uni.navigateTo({
					url:'/pages/orderDynamics/orderDynamics?id=' + id,
				})	
			}
			
		},
		onGoDetail(allInfo) {
			uni.navigateTo({
				url: `/pages/shipmentRecord/sourceDeatil?item=${JSON.stringify(allInfo)}&isSiji=1`
			})
		},
		getDemand(demand) {
			let val = '';
			if (demand.split(',').length == 4) {
				val = this.$t('运输、通关');
			} else {
				val = demand.split(",").map(item => this.demandList[item]).join("、")
			}
			return val;
		},
		async getData() {
			this.inviteDot();
			try {
				let res = await my_task({
					user_id:uni.getStorageSync('user_id')
				})
				if (res.data.code == 200) {
					this.infoList = res.data.data.data;
				}
			} catch (error) {
				
			}
		
		},
		async inviteDot() {
			try {
				let res = await invite_bind({
					register_id:uni.getStorageSync('user_id'),
					current:1,
					currentCheck:1
				})
				if (res.data.code == 200) {
					this.applyDot = res.data.data.count;
				}
			} catch (error) {
				
			}
		},
		// 切换身份变更
		onChangeIdefidy() {
			uni.showModal({
				title: this.$t('提示'),
				content: '确认变更身份为运输公司？',
				success: (success) => {
					if (success.confirm) {
						let userInfoFull = uni.getStorageSync('userInfoFull')
						uni.showLoading({
							title: 'loading...',
						})
						try {
							identity_change({
								user_id: uni.getStorageSync('user_id'),
								country: userInfoFull.country.value || 0,
								district: userInfoFull.area_id.country || 0,
								bind_user_id: this.bind_user_id
							}).then((res) => {
								uni.hideLoading()
								if (res.data.code == 200) {
									uni.showToast({
										title: '变更成功'
									})
									setTimeout(() => {
										this.isMessageGo({
											action: 'login',
										})
									}, 300);
								}
							}).catch(() => {
								uni.hideLoading()
							})
						} catch (error) {
							uni.hideLoading()
						}

					}
				},
			})

		},
		getHeight() {
			return `calc(100vh - 400rpx - ${this.navBarHeight}px)`
		},
		driver_call() {
			let confirmText = ''
			if (this.driver_infor) {
				confirmText = this.$t('联系公司')
			} else {
				confirmText = this.$t('绑定公司')
			}
			uni.showModal({
				title: '',
				content: this.$t('仅运输公司、货代公司可直接联系货主'),
				showCancel: true,
				confirmText: confirmText,
				success: (res) => {
					if (res.confirm) {
						if (!this.driver_infor) {
							uni.navigateTo({
								url: '/pages/bindingCompany/list?id=' + this.driver_infors.id
							});
						}
					}
				}
			});
		},
		driverWork() {
			let pickerForms = {
				register_id: uni.getStorageSync('user_id')
			}
			driver_work(pickerForms).then((res) => {
				if (res.data.data.data) {
					this.driver_infor = res.data.data.data.bind_user || ''
					console.log(this.$t('司机工作台'), this.driver_infor)
					this.bind_user_id = res.data.data.data.bind_user_id || ''
					this.driver_infors = res.data.data.data
					this.driver_myinfor = res.data.data.data.mine
					this.driver_inforCar = res.data.data.data.car
				}
			})
		},
		// {{$t('我的同事')}}
		onMyPerson() {
			uni.navigateTo({
				url: '/pages/myEmployeeList/myEmployeeList?bind_user_id=' + this.bind_user_id + '&userId=' + uni.getStorageSync('user_id')
			});

		},
		driverChange() {
			uni.navigateTo({
				url: '/pages/driverTask/driverList'
			});
		},
		bindingChange() {
			uni.navigateTo({
				url: '/pages/bindingCompany/list?id=' + this.driver_infors.id + '&tabIndex=' + (this.applyDot !=0 ? 1 : 0)
			});
		},
		unbindingChange(v_infor) {
			uni.navigateTo({
				url: '/pages/bindingCompany/invitedDel?driver_infor=' + JSON.stringify(v_infor) + '&id=' + this.driver_infors.id
			});
		},
		calculateHeight() {
			const systemInfo = uni.getSystemInfoSync();
			if (systemInfo.navigationBarHeight) {
				this.navBarHeight = systemInfo.navigationBarHeight + systemInfo.statusBarHeight;
			} else {
				this.navBarHeight = 44
			}
		},
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #F6F7FB;
}

.tag_yellow {
	flex-shrink: 0;
	background: #FCCE00;
	padding: 4rpx;
	border-radius: 6rpx;
	margin: 0 10rpx;

	.tag_bor {
		border: 1rpx solid #666;
		border-radius: 6rpx;
		font-size: 22rpx;
		line-height: 30rpx;
		padding: 0 10rpx;
	}
}

.driver_tag {
	background-image: linear-gradient(to right, #FFFEFD, #FFD392);
}

.driver_tags {
	background-image: linear-gradient(to right, #FFD392, #FFFEFD);
	position: relative;
}

.over-hide-0 {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.over-hide-1 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.over-hide-2 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.over-hide-3 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.driver_task {
	background-image: url('/static/img/driver_task.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 180rpx;
	display: flex;
	flex-direction: row;
	padding: 0px 24rpx;
	/deep/ uni-button {
		background-color: transparent !important;
		border: none !important;
	}
	/deep/ uni-button[disabled]:not([type]), uni-button[disabled][type=default] {
		background-color: transparent !important;
		border: none !important;
	}
	/deep/ uni-button:after {
		border: none !important;
		background-color: transparent !important;
	}
}

.driver_item {
	width: 98rpx;
	height: 98rpx;
	overflow: hidden;
}

.driver_item image {
	height: 100% !important;
}

.driver_box {
	width: 50%;
	justify-content: center;
}

.driver_boxs {
	width: 100%;
	justify-content: center;
}

.order_info {
	border-radius: 18rpx;
	background: linear-gradient(90deg, #EDFAFF 0%, #EDFAFF 100%);
	padding: 25rpx 16rpx;

	.info_city_text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #666;
		font-size: 22rpx;
		line-height: 30rpx;
		margin-top: 15rpx;

		.text {
			.ico {
				width: 28rpx;
				height: 20rpx;
				margin-right: 8rpx;
				border-radius: 4rpx;
			}
		}
	}

	.info_city {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		margin-top: 25rpx;

		.line {
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding-top: 4rpx;

			.name {
				color: #278AFF;
				font-size: 26rpx;
				font-weight: 500;
				line-height: 26rpx;
			}

			.ico {
				width: 160rpx;
			}
		}

		.city_item {
			flex-shrink: 0;
			display: flex;
			align-items: center;

			.ico {
				width: 48rpx;
				height: 34rpx;
				margin-right: 10rpx;
			}

			.info {
				color: #666;
				font-size: 22rpx;
				line-height: 30rpx;
				margin-top: 20rpx;
			}

			.text {
				font-size: 30rpx;
				color: #1D1D1D;
				font-weight: 600;
			}
		}

	}

	.info_tit {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.time {
			color: #535353;
			font-size: 24rpx;
			line-height: 24rpx;
			font-weight: 400;
		}

		.type {
			color: #1D1D1D;
			font-size: 24rpx;
			line-height: 24rpx;
			font-weight: 500;
		}
	}
}

.wlxx {
	background: #fff;
	border-radius: 30rpx;
	margin: 0 25rpx;
	padding: 20rpx;
	margin-bottom: 24rpx;

	.item_btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #eee;
		padding-top: 20rpx;
		margin-top: 15rpx;

		.btn_blue_big {
			margin-left: auto;
			width: 320rpx;
			height: 70rpx;
			flex-shrink: 0;
			text-align: center;
			line-height: 70rpx;
			color: #fff;
			font-size: 28rpx;
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			border-radius: 40rpx;
		}

		.btn {
			display: flex;
			align-items: center;
			margin-right: 20rpx;

			.ico {
				flex-shrink: 0;
				width: 28rpx;
				height: 28rpx;
				margin-right: 6rpx;
			}

			text {
				display: block;
				color: #8C8C8C;
				font-size: 22rpx;
				line-height: 24rpx;
			}
		}
	}

	.item_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1px solid #eee;
		margin-bottom: 15rpx;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.name {
		flex-shrink: 0;
		color: #535353;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.info {
		color: #333;
		font-size: 28rpx;
		line-height: 40rpx;

		.ico {
			width: 44rpx;
			height: 44rpx;
			margin-left: 12rpx;
		}

		&.red {
			color: #F53F3F;
			font-weight: 600;
		}
	}
}


//{{$t('我的任务')}}
.task-my {
	display: flex;
	align-items: center;
	color: #262728;
	font-size: 28rpx;
	font-style: normal;
	font-weight: 600;
	padding-left: 24rpx;
}

// {{$t('上报工作情况')}}
.upload-work {
	height: 68rpx;
	border-radius: 34rpx;
	background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
	box-shadow: -4px 5px 6.5px 0px rgba(200, 251, 255, 0.46) inset, -2px -6px 9.9px 0px #71D0FF inset, 0px 4px 13.8px 0px #DEE1EF;
	color: #FFF;
	text-align: center;
	font-size: 28rpx;
	line-height: 68rpx;
}

.xxxxx {
	z-index: 1;

	scroll-view {
		height: 100%;
	}
}
</style>
